<template>
    <div class="box1">
        <div class="span-anime">H</div>
        <div class="span-anime">E</div>
        <div class="span-anime">L</div>
        <div class="span-anime">L</div>
        <div class="span-anime">O</div>
        <div class="span-anime">，</div>
        <div class="span-anime">W</div>
        <div class="span-anime">O</div>
        <div class="span-anime">R</div>
        <div class="span-anime">L</div>
        <div class="span-anime">D</div>
    </div>
</template>
<script setup>
import { animate } from 'animejs'
import { onMounted } from 'vue'

onMounted(() => {
    createAnime()
})
const createAnime = () => {
    animate('.span-anime', {
        y: [
            { to: '-20px', ease: 'outExpo', duration: 600 },
            { to: 0, ease: 'outBounce', duration: 800, delay: 100 },
        ],
        rotate: {
            from: '-1turn',
            delay: 0,
        },
        delay: (_, i) => i * 50,
        ease: 'inOutCirc',
        loopDelay: 1000,
        loop: true,
    })
}
</script>
<style lang="less" scoped>
.box1 {
    display: flex;
    padding-top: 20px;
    align-items: center;
    letter-spacing: 2px;
}
</style>
